<template>
    <div class="checkReader">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">阅读器</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
                <div class="search">
                    <label>
                        <input type="text"
                               placeholder="阅读器编号/区域名称"
                               v-model="searchParam">
                    </label>
                    <i class="icon" @click="search"></i>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="readerPro.all" :show="readerPro.show" :color="readerPro.color"></pCircle>
                    <p class="title tc">阅读器总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="placePro.all" :show="placePro.show" :color="placePro.color"></pCircle>
                    <p class="title tc">已布置数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="unPlacePro.all" :show="unPlacePro.show" :color="unPlacePro.color"></pCircle>
                    <p class="title tc">未布置数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body">
            <p class="btns">
                <el-button round>批量删除</el-button>
                <el-button round>批量导出</el-button>
            </p>
            <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :max-height="tableH">
                <el-table-column
                    type="selection">
                </el-table-column>
                <el-table-column
                    prop="readerId"
                    class-name="red"
                    label="阅读器编号">
                </el-table-column>
                <el-table-column
                    sortable
                    class-name="orange"
                    prop="areaId"
                    label="所在区域">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改日期">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-dropdown @command="getCommand">
                            <el-button
                                size="small">
                                转移
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <span class="title">请在系统转以后尽快完成实地转移!</span>
                                <el-dropdown-item :command="item.areaId"
                                                  v-for="(item,index) in areaList"
                                                  :key="index"
                                                  @click.native="transferHandle(scope.row)">{{item.areaName}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :page-size="pagSize"
                :total="pagTotal">
            </el-pagination>
            <p class="pagination">
                每页显示
                <select @change="pageSizeChange" v-model="pageSize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                条
            </p>
        </div>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "checkReader",
        components: {
            pCircle
        },
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                areaList: [], // 区域列表
                searchParam: '',
                pagTotal: 1, // 初始化总的数据数
                pageSize: 10, // 每页显示的值
                pagSize: 10, // 传入分页组件每页显示的值
                // 阅读器总量进度条参数
                readerPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 已布置数量进度条参数
                placePro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 未布置数量进度条参数
                unPlacePro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                tableH: '500',
                dropdownVal: "", // 表格下拉菜单的值
            }
        },
        methods: {
            deleteRow(index, rows) {
                this.$alert('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    closeOnClickModal: true,
                    confirmButtonClass: 'dialog-big-button',
                }).then(() => {
                    rows.splice(index, 1)
                }).catch(() => {

                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            getCommand(command) {
                this.dropdownVal = command
            },
            /**
             * 转移阅读器
             */
            transferHandle(row) {
                let params = {
                    readerId: row.readerId,
                    areaId: this.dropdownVal,
                    userId: ""
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .readers
                    .moveAreas(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.getIndex()
                            this.$message.success(this.$msgDictionary.operation.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 搜索
             */
            search() {
                if (this.searchParam.trim() === '') {
                    this.getIndex()
                    this.$message.error(this.$msgDictionary.query.emptyInput)
                    return
                }
                let params = {
                    readersIdsAndUserId: this.searchParam.trim(),
                    pageIndex: 1,
                    pageSize: 10
                }
                params.readersIdsAndUserId = params.readersIdsAndUserId + "," + (localStorage.getItem("user")
                    ? JSON.parse(localStorage.getItem("user")).userId
                    : 1)
                this.$ajax
                    .readers
                    .getReadersById(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.tableData = result.result.content
                            if (this.tableData.length === 0) {
                                this.$message.error(this.$msgDictionary.query.emptyResult)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            // 每页显示更改
            pageSizeChange() {
                this.pagSize = this.pageSize * 1
                this.getIndex(this.pageSize * 1, 1)
            },
            // 分页更改
            currentChange(index) {
                this.getIndex(this.pageSize * 1, index)
            },
            getIndex(pageSize, pageNum) {
                let params = {
                    userId: "",
                    pageSize: pageSize ? pageSize * 1 : 10,
                    pageIndex: pageNum ? pageNum * 1 : 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .readers
                    .getReaders(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result) {
                                this.tableData = result.result.readersInfoDTOS.content
                                this.pagTotal = result.result.totalReaderNum
                                this.readerPro.all = result.result.totalReaderNum
                                this.readerPro.show = result.result.totalReaderNum
                                this.placePro.all = result.result.totalReaderNum
                                this.placePro.show = result.result.bandAreaNum
                                this.unPlacePro.all = result.result.totalReaderNum
                                this.unPlacePro.show = result.result.notBandAreaNum
                                // 获取区域信息
                                this.$ajax
                                    .areas
                                    .getAreas(params)
                                    .then((res) => {
                                        let result = res.data
                                        if (result.code === 200) {
                                            if (result.result) {
                                                this.areaList = result.result.areasInfoDTOS.content
                                            }
                                        } else if (result.code === 408) {
                                            this.$message.error(this.$msgDictionary.loginTimeout)
                                            let timer = setTimeout(() => {
                                                clearTimeout(timer)
                                                this.$router.push({path: '/login'})
                                            }, 1500)
                                        } else {
                                            this.$message.error(result.msg)
                                        }
                                    }, () => {
                                        this.$message.error(this.$msgDictionary.serviceException)
                                    })
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        },
        mounted() {
            let winH = window.screen.height
            this.tableH = winH * 0.44
            this.getIndex()
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/index-head";

    .checkReader {
        height: 100%;
        .index-head {
            .left {
                .title {
                    .icon {
                        background-position: -398px -298px;
                    }
                }
            }
        }
        .pagination {
            position: fixed;
            bottom: 0.5rem;
            left: 21%;
        }
    }
</style>
